<!-- @format -->

<!-- 顶部吸顶效果 -->

<template>
    <div class="container" :class="{show: y > 60}">加油加油，脑袋不要混乱，一点点来</div>
</template>

<script setup lang="ts">
import {useScroll} from '@vueuse/core';

const {y} = useScroll(window);
</script>
tvxx
<style scoped lang="scss">
.container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background-color: red;
    color: white;
    line-height: 40px;
    text-align: center;
    transform: translateY(-100%);
    opacity: 0;
    z-index: 999;

    &.show {
        transform: none;
        opacity: 1;
        transition: all 0.3s linear;
    }
}
</style>
